$red: " #f66";
$blue: " #09f";
$green: " #3c9";
$orange: " #3c9";

.stretching-column {
  overflow: hidden;
  border: 1px solid $blue;
  width: 600px;
  height: 300px;
  line-height: 20px;
  font-size: 16px;
  color: $orange;
  &__top{
    height: 100px;
    width: 100%;
  }
  .left {
    overflow: hidden;
    float: left;
    position: relative;
    height: 100%;
  }
  .right {
    overflow: hidden;
    padding: 10px;
    height: 100%;
    background-color: #f0f0f0;
    word-break: break-all;
  }
}
.resize-bar {
  overflow: scroll;
  width: 200px;
  height: 100%;
  opacity: 0;
  resize: both;
  // resize: horizontal 最右边的边距可以拖拽
  // resize: vertical 最底边的边距可以拖拽
  &::-webkit-scrollbar {
    width: 200px;
    height: 100%;
  }
  &:hover,
  &:active {
    & .resize-line {
      border-left: 1px dashed $blue;
    }
  }
}
.resize-line {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  border-left: 1px solid #ccc;
  border-right: 2px solid #f0f0f0;
  pointer-events: none;
}
.resize-text {
  // overflow-x: hidden;
  position: absolute;
  left: 0;
  right: 5px;
  top: 0;
  bottom: 0;
  padding: 10px;
  word-break: break-all;
}
